<template>
  <div id="building"></div>

    <a-row>
        <a-col :span="12">
            <a-form :model="formState" style="margin-top:20%" :label-col="labelCol" :wrapper-col="wrapperCol">

                <a-form-item :wrapper-col="{ span: 10, offset: 6 }">
                    <a-typography-paragraph style="font-size: 60px; font-weight: bold"> 火花创意</a-typography-paragraph>
                    <a-typography-paragraph style="font-size: 20px; font-weight: bold"> NET innovation and
                        enterpeneurship exchange platform</a-typography-paragraph>
                </a-form-item>

                <a-form-item :wrapper-col="{ span: 10, offset: 5 }">
                    <!-- <a-button shape="round" style=" width: 120px; height: 60px; margin-left: 40px;font-size: 30px" type="primary"
                        @click="showModal">Login</a-button> -->
                        <a-button  shape="round" style=" width: 120px; height: 60px; margin-left: 40px;font-size: 30px" type="primary"
                        @click="showModal">Login</a-button>
                        <a-modal v-model:visible="visible" title="" @ok="handleOk">
                            <template #footer>
                               
                                <a-button key="submit" type="primary" :loading="loading" @click="login">登录</a-button>
                              </template>         
                              <a-typography-title style="text-align: center">登录</a-typography-title>
                              <a-form-item label="账号" :wrapper-col="{ span: 15, offset: 4 }">
                                <a-input v-model:value="user.u_id" />
                              </a-form-item>          
                              <a-form-item label="密码" :wrapper-col="{ span: 15, offset: 4 }">
                                <a-input-password v-model:value="user.u_pwd" @keyup.enter="login" />
                              </a-form-item>          
                              <a-form-item :wrapper-col="{ span: 15, offset: 8 }">            
                              </a-form-item>            
                        </a-modal>
                    <a-button shape="round" style=" width: 120px; height: 60px; margin-left: 40px;font-size: 30px"
                        @click="register">Create</a-button>
                </a-form-item>

                <a-form-item :wrapper-col="{ span: 10, offset: 6 }">
                    <a-typography-link href="https://antdv.com" target="_blank">
                        点击查看详情
                    </a-typography-link>
                </a-form-item>
            </a-form>
        </a-col>
        <a-col :span="12">

            <!-- <a-image
            style="margin-top:20%" 
            :width="400"
            :hight="500"
            :wrapper-col="{ offset: 6 }"
            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
          /> -->

            <a-card hoverable style="width: 630px; height: 500px; margin-top:50px">
                <template #cover>
                    <img alt="example" src="https://img1.baidu.com/it/u=2065342635,3713815846&fm=26&fmt=auto" />
                </template>
                <a-card-meta style="font-size: 30px" title="NET交易平台">
                    <template #description>www.instagram.com</template>
                </a-card-meta>
            </a-card>

        </a-col>


    </a-row>
</template>
<script setup>
  import { defineComponent, ref, reactive } from "vue";
  import { post, setLocalToken, tip } from "@/common";

  import { useRouter } from "vue-router";
  const router = useRouter(); //获取用户路由

  const visible = ref(false);

  const showModal = () => {
    visible.value = true;
  };

  const handleOk = e => {
    console.log(e);
    visible.value = false;
  };

  // return {
  //   visible,
  //   showModal,
  //   handleOk,
  // };

  //reactive 用于双向绑定响应
  const user = reactive({
    u_id: "",
    u_pwd: "",
  });

  const login = () => {
    post("/security/login", user).then((res) => {
      console.log(res);
      tip.success("登录成功！");
      const token = res.data; //获取返回的令牌
      //将令牌缓存本地
      setLocalToken(token);
      //跳转至home路由
      router.push({ path: "/home" });
    });
  };

  const register = () => {
    router.push({ path: "/register" });
  };

  //一行24列
  const labelCol = {
    span: 4,
  };
  const wrapperCol = {
    span: 10,
  };
</script>

<style>
  .logincontent {
    display: flex;
    flex-direction: column;
    background-size: 100% 100%;
    background-attachment: fixed;

    width: 100%;
    height: 100%;
    min-width: 900px;
    min-height: 1000px;

    justify-content: center;
    align-items: center;
  }

  .loginform {
    background-color: #fff;
    min-width: 600px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
    padding: 30px 20px;
  }
 
    #building {
        background: url("https://ts1.cn.mm.bing.net/th?id=OIP-C.IAwb8Ak5ErRxGQMGvmN5bQHaNK&w=61&h=106&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2");
        width: 100%;
        height: 100%;
        position: fixed;
        background-size: 100% 100%;
    }

</style>